<template>
  <div class="popups" @click="hides($event,2)">
    <div class="content" @click="stopPropagation">
      <div class="bgs">
        <div class="cols" ><img src="./img/clos.png" alt="" @click="hides"></div>
        <div class="container">
          <div class="top">
            <div class="avatar">
              <img :src="user_avatar"/>
            </div>
            <img src="./img/top.png"/>
          </div>
          <div class="name">Hi,{{user_name}}</div>
          <div class="desc">
            <p>恭喜你激活成功，成为十分读书</p>
            <p>会员，请你务必扫码关注公众</p>
            <p>号，加入共读班级开始共读</p>
          </div>
          <div class="qr-code">
            <img :src="qr_code" alt="">
          </div>
          <div class="bottom">
        </div>
        </div>
      </div>
      <img class="bottom-img" src="./img/bottomImg.png" />
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data:function(){
      return {
      }
    },
    props: ['qr_code','user_name','user_avatar'],
    methods: {
      hides: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        this.$emit('hide')
      },
      stopPropagation: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        return false
      }
    },
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
